<html>
    <head>
        <script src="incppect.js"></script>
        <script src="imgui-ws.js"></script>
    </head>

    <body style="font-family: Georgia, serif;">
        <script>
            function init() {
                var output = document.getElementById('client-info');

                incppect.render = function() {
                    imgui_ws.gl.clearColor(0.45, 0.55, 0.60, 1.00);
                    imgui_ws.gl.clear(imgui_ws.gl.COLOR_BUFFER_BIT);

                    imgui_ws.incppect_tex_font(this);
                    imgui_ws.incppect_draw_lists(this);
                    imgui_ws.render();

                    var my_id = this.get_int32('my_id[%d]', -1) || 0;
                    output.innerHTML = 'Your client Id: ' + my_id;
                }

                incppect.onerror = function(evt) {
                    if (typeof evt === 'object') {
                        output.innerHTML = 'Error: check console for more information';
                        console.error(evt);
                    } else {
                        output.innerHTML = evt;
                    }
                }

                incppect.k_requests_update_freq_ms = document.getElementById('update_freq_ms').value;
                incppect.init();

                imgui_ws.set_incppect_handlers(incppect);
                imgui_ws.init('canvas_main');
            }

            window.addEventListener('load', init);

        </script>

        <div id=main-container align=left width=900px style='padding-left: 16px; padding-top: 1px;'>
            <h2>imgui-ws : demo-null</h2>
            <div style='padding: 3px; width: 800px; word-wrap: break-word;'>
                The vertex and index arrays for the Dear ImGui scene below are generated server-side.
                The arrays are streamed to the WebSocket clients and rendered in the browser using WebGL.
            </div>
            <br>
            <div style='padding: 3px; width: 800px; word-wrap: break-word;'>
                There can be multiple clients connected simultaneously to the same server (see the "WebSocket clients" window below).
                Wait for your client to take control and try playing with the widgets.
                Your actions will be visible to all currently connected clients.
            </div>
            <br>
            <div id="client-info"></div>
            Update freq: <input type="range" min="16" max="200" value="50" class="slider" id="update_freq_ms"
                                    onChange="incppect.k_requests_update_freq_ms = this.value; update_freq_ms_out.value = this.value;">
            <output id="update_freq_ms_out">50</output>[ms]<br>
            <br>
            <canvas id="canvas_main" width="1200px" height="800px" style="background-color: black;" tabindex="0">Your browser does not support the HTML5 canvas tag.</canvas>

            <br>
            <a href="https://github.com/ggerganov/imgui-ws"><span class="icon icon--github"><svg viewBox="0 0 16 16" width="16px" height="16px"><path fill="#828282" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg>
                </span><span class="repo">Source code</span></a>
        </div>


    </body>
</html>
